<template>
	<div>
		<el-dialog v-if="visible4" :visible.sync="visible4" width="800px" :title="'评价'" @close="closeDia">

			<el-tabs v-model="activeName">
				<el-tab-pane label="评价" name="first">
					<div style="width: 60%;text-align: center;margin: 0 auto;">
						<el-form label-width="80px" :model="params2">

							<el-form-item label="评价过程">
								<el-input v-model="params2.evaluateContent" class="element-width" placeholder="填写评价过程" type="textarea"
									style="width: 100%;">
								</el-input>
							</el-form-item>

							<el-form-item label="问题">
								<el-radio-group v-model="params2.isWrong" size="small" style="width: 100%;text-align: left;">
									<el-radio :label="false" border>没有问题</el-radio>
									<el-radio :label="true" border>问题整改</el-radio>
								</el-radio-group>
							</el-form-item>

							<template v-if="params2.isWrong">
								<el-form-item label="问题整改">
									<el-input v-model="params2.rectifyContent" class="element-width" placeholder="填写问题整改" type="textarea"
										style="width: 100%;">
									</el-input>
								</el-form-item>

								<el-form-item label="执行人" prop="rectifyBy">
									<el-select v-model="params2.rectifyBy" placeholder="请选择执行人" style="width: 100%;">
										<el-option v-for="item in dataList3" :label="item.userName" :value="item.userId">
										</el-option>
									</el-select>
								</el-form-item>

								<el-form-item label="截止" prop="rectifyEndTime">
									<el-date-picker class="short-input" v-model="params2.rectifyEndTime" type="date" format="yyyy-MM-dd"
										placeholder="截止日期" style="width: 100%;">
									</el-date-picker>
								</el-form-item>

								<el-form-item label="下次评价" prop="nextEvaluateTime">
									<el-date-picker class="short-input" v-model="params2.nextEvaluateTime" type="date" format="yyyy-MM-dd"
										placeholder="下次评价" style="width: 100%;">
									</el-date-picker>
								</el-form-item>
							</template>
						</el-form>

						<div class="dialog-footer" style="text-align: center!important;margin-top: 20px;">
							<el-button type="primary" size="small" @click="saveBeizhu()">确 定</el-button>
							<el-button size="small" @click="closeDia()">取 消</el-button>
						</div>
					</div>

				</el-tab-pane>

				<el-tab-pane label="评价列表" name="second">
					<!-- <div style="margin-bottom: 10px;">
						<el-select v-model="tempStatus" clearable placeholder="选择状态" size="mini"
							style="margin-left: 10px;width: 100px;" @change="getDocumentEntQuestionList">
							<el-option label="未完成任务" value="ONGOING_SCHEDULE" />
							<el-option label="历史任务" value="HISTORY_SCHEDULE" />
						</el-select>
					</div> -->

					<div>
						<el-table :data="dataList4" style="width:100%" border size="mini">
							<el-table-column type="index" width="50">
							</el-table-column>
							<el-table-column prop="evaluateContent" label="评价过程"></el-table-column>
							<el-table-column prop="rectifyContent" label="问题"></el-table-column>
							<el-table-column prop="isWrong" label="状态">
								<template slot-scope="scope">
									<el-tag v-if="scope.row.isWrong" type="danger" size="mini">问题整改</el-tag>
									<el-tag v-else type="success" size="mini">没有问题</el-tag>
								</template>
							</el-table-column>
						</el-table>
					</div>
					<!-- <div v-show="dataList4&&dataList4.length>0" align="right" style="margin-top: 10px">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page.sync="pageIndex" :page-sizes="[10,20,30,50]" :page-size="pageSize"
							layout="total, sizes, prev, pager, next, jumper" :total="total">
						</el-pagination>
					</div> -->
				</el-tab-pane>
			</el-tabs>

		</el-dialog>
	</div>
</template>

<script>
	let that
	export default {
		name: 'questions',
		props: ['categoryItemId', 'documentId', 'leftSelectItem'],
		data() {
			return {
				params: {},
				visible4: false,
				activeName: 'first',
				params2: {
					categoryItemId: '', // 档案子栏目id
					isWrong: false,
					rectifyContent: '', // 问题整改
					rectifyBy: '', // 执行人
					rectifyEndTime: '', // 截止时间
					nextEvaluateTime: '', // 下次评价计划 (时间)
				},
				dataList3: [],
				dataList4: [],
				total: 0,
				pageIndex: 1,
				pageSize: 20,
				tempStatus: 'HISTORY_SCHEDULE'
			}
		},
		created: function() {},
		mounted: function() {
			that = this

			that.params2.categoryItemId = that.categoryItemId

			that.ajax({
				url: '/documentEntSchedule/getPlanExecutorList',
				contentType: 'application/x-www-form-urlencoded',
				data: {},
				success: function(result) {
					that.dataList3 = result.data
				}
			})

			that.getDocumentEntQuestionList()
		},

		methods: {

			handleSizeChange: function(val) {
				this.pageIndex = 1;
				this.pageSize = val;
				this.getDocumentEntQuestionList();
			},

			handleCurrentChange: function(val) {
				this.pageIndex = val;
				this.getDocumentEntQuestionList();
			},

			//保存问题
			saveBeizhu() {

				that.ajax({
					url: '/documentEvaluate/saveEvaluate',
					data: JSON.stringify(that.params2),
					contentType: 'application/json',
					dataType: 'json',
					method: 'POST',
					success: function(result) {
						if (result.data) {
							that.params2 = that.$options.data().params2
							that.getDocumentEntQuestionList()
							return that.$message({
								message: '成功',
								type: 'success'
							});
						}
					},
				})
			},

			getDocumentEntQuestionList() {
				that.ajax({
					url: 'documentEvaluate/getEvaluateListByCategoryItemId',
					data: {
						categoryItemId: that.categoryItemId,
						// tempStatus: that.tempStatus
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data) {
							that.dataList4 = result.data;
						}
					},
				})
			},

			closeDia() {
				that.visible4 = false
				that.$emit("closeDia", true)
			},

			open() {
				that.visible4 = true
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>